<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<link href="css/general.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/loopedslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<link type="text/css" href="css/jquery-ui.css" rel="stylesheet" />


<script>
	$(function() {
		$("#datepicker").datepicker({
			dateFormat : 'yy-mm-dd'
		});
	});
	//make sure that start time earlier than end time
	function testStartEndTime() {
		var from = document.getElementById('fromTime').value;
		var to = document.getElementById('toTime').value;
		if (from >= to) {
			alert("Start time must be earlier than end time");
			return false;
		}
		return true;
	}
</script>

<script type="text/javascript">
	var req;
	function validate() {
		var emailField = document.getElementById("email");
		var url2 = "Validate.jsp?email=" + escape(emailField.value);
		//alert(url2);
		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url2, true);
		req.onreadystatechange = callback;
		req.send(null);
	}

	function callback() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				//alert(req.responseText);
				var msg = req.responseXML.getElementsByTagName("msg")[0];
				//alert(msg);
				setMsg(msg.childNodes[0].nodeValue);
			}
		}
	}

	function setMsg(msg) {
		mdiv = document.getElementById("customerMsg");
		if (msg == "invalid") {
			mdiv.innerHTML = "<font color='red'>Customer doesn't exist</font>";
		} else {
			mdiv.innerHTML = "<font color='green'>Valid</font>";
		}
	}
</script>


<script type="text/javascript">
	var req;
	function testAllFields(form) {

		var str = '';
		var elem = form.elements;
		for ( var i = 2; i < elem.length - 1; i++) {
			var name = elem[i].name;
			var val = elem[i].value;
			if (val == "") {
				alert("Please enter date, time, and number of people. \n");
				elem.focus(); // set the focus to this input
				return false;
			}
		}
		return true;
	}
	function checkAvailability() {
		testAllFields(document.getElementById('adminMakeReservation'));
		var date = document.getElementById('datepicker').value;
		var from = date + ' ' + document.getElementById('fromTime').value;
		var to = date + ' ' + document.getElementById('toTime').value;
		var num = document.getElementById('numberOfPeople').value;
		var url = "CheckAvailability.jsp?from=" + from + "&to=" + to + "&num="
				+ num;

		if (window.XMLHttpRequest) {
			req = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			req = new ActiveXObject("Microsoft.XMLHTTP");
		}
		req.open("GET", url, true);
		req.onreadystatechange = callbackTable;
		req.send(null);
	}

	function callbackTable() {
		if (req.readyState == 4) {
			if (req.status == 200) {
				//alert(req.responseText);
				var table = req.responseXML.getElementsByTagName("table")[0];
				//alert(table);
				setTable(table.childNodes[0].nodeValue);
			}
		}
	}
	function setTable(mTalbe) {
		mtable = document.getElementById("mtable");
		if (-1 == mTalbe) {
			mtable.innerHTML = "<font color='red'>No Table Available</font>";
		} else {
			mtable.innerHTML = "<font color='green'>Table #" + mTalbe
					+ " is Available</font>";
		}
	}
</script>

</head>
<body>
	<div class="mainBackground"></div>
	<div id="maincontent" class="center">
			<p>&nbsp;</p>
		<h2>Make a reservation for a customer</h2>
		<p>&nbsp;</p>	
		<form id="adminMakeReservation" action="ReservationConfirmation.jsp"
			method="post">
			<input type="hidden" name="action" value="checkTable" />
			<p>
				Customer Email:<input type="text" name="email" id="email"
					onblur="validate()" />
			</p>
			<span id="customerMsg"></span> </br>

			<p>
				Date: <input type="text" name="date" id="datepicker" />
			</p>
			</br>
			<p>
				From:<select name="fromTime" id="fromTime">
					<option value="10:00:00">10:00</option>
					<option value="11:00:00">11:00</option>
					<option value="12:00:00">12:00</option>
					<option value="13:00:00">13:00</option>
					<option value="14:00:00">14:00</option>
					<option value="15:00:00">15:00</option>
					<option value="16:00:00">16:00</option>
					<option value="17:00:00">17:00</option>
					<option value="18:00:00">18:00</option>
					<option value="19:00:00">19:00</option>
					<option value="20:00:00">20:00</option>
					<option value="21:00:00">21:00</option>
					<option value="22:00:00">22:00</option>
				</select> To:<select name="toTime" id="toTime" onBlur="testStartEndTime()">
					<option value="10:00:00">10:00</option>
					<option value="11:00:00">11:00</option>
					<option value="12:00:00">12:00</option>
					<option value="13:00:00">13:00</option>
					<option value="14:00:00">14:00</option>
					<option value="15:00:00">15:00</option>
					<option value="16:00:00">16:00</option>
					<option value="17:00:00">17:00</option>
					<option value="18:00:00">18:00</option>
					<option value="19:00:00">19:00</option>
					<option value="20:00:00">20:00</option>
					<option value="21:00:00">21:00</option>
					<option value="22:00:00">22:00</option>
				</select>
			</p>
			</br>

			<p>
				Number of People: <input type="text" name="numberOfPeople"
					id="numberOfPeople" />
			</p>
			<p>
				<input type="button" value="check availability"
					onclick="checkAvailability()" /> <span id="mtable"></span>
			</p>
			<input type="submit" value="submit"></input>

		</form>
		<!-- <img src="images/orderFood.png" width="412" height="524"> -->
			<p>&nbsp;</p>
				<p>&nbsp;</p>
	</div>
	
	<div class="clear"></div>

	<div id="footer">
		&copy; K&G Restaurant | all Rights Reserved by CSE 333 <span
			class="credit">
		<a href="http://www.weibo.com/gaotaojie/profile?topnav=1&wvr=4">Taojie Gao's Paradise</a> by Taojie Gao</span>

	</div>
</body>
</html>